import React from 'react';
// import '@/assets/css/reset.css'
import '@/assets/css/coupon.css'

const Component = () =>
{
    let [status, SetStatus] = React.useState('')
    let [list, SetList] = React.useState([])
    let [page, SetPage] = React.useState(1)
    let [hasMore, SethasMore] = React.useState(true)

    let statuslist = [
        {name:'全部', value: ''},
        {name:'未使用', value: '1'},
        {name:'已使用', value: '0'},
    ];

    //上拉加载
    const loadMore = async () =>
    {
        ListData()
    }

    // 下拉刷新的方法
    const onRefresh = async () =>
    {
        SetPage(1)
        SethasMore(true)
        SetList([])
        ListData()
    }

    //请求列表数据
    const ListData = async () =>
    {
        //封装数据
        var data = {
            busid: React.Business.id,
            status: status,
            page: page
        }

        var result = await React.HTTP.post('/order/coupons', data)

        if(result.code == 1)
        {
            SethasMore(true)
            SetPage(page + 1)
            SetList(list.concat(result.data))
        }else
        {
            SethasMore(false)
            return false
        }
    }

    let TabChange = (status:any) =>
    {
        SetStatus(status)
        onRefresh()
    }

    return (
        <>
            <React.UI.NavBar 
                style={{background: `rgb(55, 68, 134)`, color:'#fff'}}
                back='返回' 
                onBack={React.back}
            >订单列表</React.UI.NavBar>

            <React.UI.Tabs defaultActiveKey={status} onChange={TabChange}>
                {statuslist.map((item) => 
                    <React.UI.Tabs.Tab title={item.name} key={item.value} />)}
            </React.UI.Tabs>

            <React.UI.PullToRefresh onRefresh={onRefresh}>
                <div className="coupon_list">
                    {list.map((item:any, key) => 
                        <div className="coupon_item" key={key}>
                            <div className="item_content">
                                <React.Router.Link to={`/coupon/info?cid=${item.cid}`}>
                                    <div className="left">
                                        <img src={item.coupon.thumb_text} alt="" />
                                        {item.coupon.rate}<span>折</span>
                                    </div>
                                    <div className="right">
                                        <div>{item.coupon.title}</div>
                                        <div>订单满<span>100元</span>打<span>8折</span></div>
                                        <div>每人限领1张</div>
                                        <div>{item.coupon.createtime_text}-{item.coupon.endtime_text}</div>
                                        <div className='lzs' style={{color:'coral'}}>现在还剩{item.coupon.total}张</div>
                                    </div>
                                </React.Router.Link>
                            </div>
                            <div className="item_btn">
                                {item.status == "1" && 
                                    <React.Router.Link to={'/'}>
                                        <button className="right_btnl">使用</button>
                                    </React.Router.Link>}
                                {item.status == "0" && <button className="right_btn">已使用</button>}
                            </div>
                        </div>
                    )}
                    
                </div>
            </React.UI.PullToRefresh>

            <React.UI.InfiniteScroll loadMore={loadMore} hasMore={hasMore} threshold={0} />


        </>
    )
}

export default Component